<template>
  <div id="stall">
    <div class="btn">
      <el-button type="primary" @click="getstall('立方总车位数,立方占用车位数,立方剩余车位数')" plain>总数</el-button>
      <el-button type="primary" @click="getstall('B1车位总数,B1占用车位,B1剩余车位')" plain>B1</el-button>
      <el-button type="primary" @click="getstall('B2车位总数,B2占用车位,B2剩余车位')" plain>B2</el-button>
      <el-button type="primary" @click="getstall('B3车位总数,B3占用车位,B3剩余车位')" plain>B3</el-button>
    </div>
    <ul>
      <li>
        <img src="../../assets/tu1.png" alt="" />
        <h5>{{ stallAll }}</h5>
        <p>车位总数</p>
      </li>
      <li>
        <img src="../../assets/tu2.png" alt="" />
        <h5>{{ spareParkingSpace }}</h5>
        <p>剩余车位</p>
      </li>
      <li>
        <img src="../../assets/tu3.png" alt="" />
        <h5>{{ usedSpace }}</h5>
        <p>已用车位</p>
      </li>
    </ul>
  </div>
</template> 
<script>
import { _stall } from '../../http/api';
export default {
  data() {
    return {
      stallAll: 0, //车位总数
      spareParkingSpace: 0, //剩余车位
      usedSpace: 0, //已用车位
    };
  },
  methods: {
    // 获取安防态势数据
    getstall(tags = '立方总车位数,立方占用车位数,立方剩余车位数') {
      let params = {
        tags
      }
      _stall(params)
        .then((res) => {
          this.stallAll = res[0].value;
          this.spareParkingSpace = res[1].value;
          this.usedSpace = res[2].value;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 自适应
    winSize() {
      var ratioY = window.innerHeight / 188;
      var ratioX = window.innerWidth / 370;
      window.document.body.style.transform = "scale(" + ratioY + ")";
      window.document.body.style.transformOrigin = "0px 0px";
    },
  },
  mounted() {
    this.getstall();
    this.winSize();
    window.onresize = () => {
      return (() => {
        var ratioX = window.innerWidth / 370;
        var ratioY = window.innerHeight / 188;
        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
      })();
    };
  },
};
</script>
<style scoped lang="less">
#stall {

  width: 370px;
  height: 170px;
  padding: 0.2rem 0.15rem;
  box-sizing: border-box;
}

ul {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
}

li {
  position: relative;
  text-align: center;
  color: #fff;
}

p {
  font-size: 14px;
  font-weight: bold;
}

img {
  width: 100px;
  height: 100px;
}

li h5 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 38% 0;
  font-weight: 600;
  font-size: 22px;
}

.btn {
  width: 100%;
  // text-align: center;
  display: flex;
  justify-content: end;

  .el-button {
    width: 50px;
    height: 20px;
    padding: 0;
  }
}
</style>

